<template>
  <div class="list-box">
    <div
      class="right-project-list"
      v-if="data && data.folders && data.folders.length > 0"
    >
      <folder
        v-for="(item, index) in data.folders"
        :key="index"
        :data="item"
        :index="index"
        :batch="batch"
        :checked.sync="batchChecked[index]"
        @edit-folder="handleEditFolder"
        @delete-folder="handleDeleteFolder"
        @restore-folder="handleRestoreFolder"
        @permanentlydelete-folder="handlePermanentlyDeleteFolder"
        v-bind="$attrs"
        v-on="$listeners"
      ></folder>
    </div>
    <div
      class="right-project-list"
      v-if="data && data.projects && data.projects.length > 0"
    >
      <project
        v-for="(item, index) in data.projects"
        :key="index"
        :batch="batch"
        :data="item"
        :index="index"
        :checked.sync="batchChecked[index]"
        @delete-project="handleDeleteProject"
        @copy-project="handleCopyProject"
        @restore-project="handleRestoreProject"
        @permanentlydelete-project="handlePermanentlyDeleteProject"
        v-bind="$attrs"
        v-on="$listeners"
      ></project>

      <div
        class="right-project-create last"
        @click="newMenuShow = !newMenuShow"
        v-click-outside="closeNewMenu"
        v-if="createProjectShow"
      >
        <div class="right-project-create-main">
          <img
            src="https://image.xuexiwangzhe.com/FthVzSBJedoAgm3a8Vg0dBdeFcg6"
            class="right-project-create-img"
          />
          <div>新建</div>
          <div
            class="right-project-create-modal"
            :class="{ 'right-project-create-modal-actived': newMenuShow }"
          >
            <div class="right-project-create-modal-item" @click="newProject">
              <img
                class="right-project-create-modal-item-img"
                src="https://image.xuexiwangzhe.com/Fk6Dfq5sj1oJuihoAU_O0w7TJIya"
              />
              <div>新建项目</div>
            </div>
            <div class="right-project-create-modal-item" @click="newFolder">
              <img
                class="right-project-create-modal-item-img"
                src="https://image.xuexiwangzhe.com/FsGJUJeYTKKIQTEpSWo4lwXK0rAg"
              />
              <div>新建文件夹</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="right-project-create right-project-create-center"
      @click="newMenuShow = !newMenuShow"
      v-click-outside="closeNewMenu"
      v-if="
        (!data ||
          ((!data.folders || data.folders.length <= 0) &&
            (!data.projects || data.projects.length <= 0))) &&
          !unCreate &&
          !createProjectShow
      "
    >
      <div class="right-project-create-main">
        <img
          src="https://image.xuexiwangzhe.com/FthVzSBJedoAgm3a8Vg0dBdeFcg6"
          class="right-project-create-img"
        />
        <div>新建</div>
        <div
          class="right-project-create-modal"
          :class="{ 'right-project-create-modal-actived': newMenuShow }"
        >
          <div class="right-project-create-modal-item" @click="newProject">
            <img
              class="right-project-create-modal-item-img"
              src="https://image.xuexiwangzhe.com/Fk6Dfq5sj1oJuihoAU_O0w7TJIya"
            />
            <div>新建项目</div>
          </div>
          <div class="right-project-create-modal-item" @click="newFolder">
            <img
              class="right-project-create-modal-item-img"
              src="https://image.xuexiwangzhe.com/FsGJUJeYTKKIQTEpSWo4lwXK0rAg"
            />
            <div>新建文件夹</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import project from "./listProject";
import folder from "./listFolder";
import { mapState } from "vuex";
export default {
  props: {
    data: {
      type: Object,
      default() {
        return {
          // folders: [
          //   {
          //     id: 999,
          //     name: "绩效管理训练营"
          //   }
          // ]
        };
      },
    },
    unCreate: {
      // 是否显示创建按钮
      type: Boolean,
      default: false,
    },
    createProjectShow: {
      // 是否将创建按钮显示在课程列表后面
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      batch: false, // 批量管理开关
      batchChecked: [], // 批量管理是否选中数组
      newMenuShow: false,
    };
  },
  computed: mapState(["listOperateData", "listOperate", "selectedFolderId"]),
  watch: {
    newprojectdata: {
      handler: function(newVal, oldVal) {
        if (newVal) {
          if (this.data.projects) {
            this.data.projects.unshift(newVal);
          } else {
            this.data["projects"] = [newVal];
          }
          this.$forceUpdate();
        }
      },
      deep: true,
    },
    listOperateData: {
      handler: function(newVal, oldVal) {
        if (this.listOperate == "delete-project") {
          if (this.data.projects.filter((item) => item.id == newVal.id)) {
            this.data.projects.splice(
              this.data.projects.findIndex((item) => item.id === newVal.id),
              1
            );
          }
        } else if (this.listOperate == "delete-folder") {
          if (this.data.folders.filter((item) => item.id == newVal.id)) {
            this.data.folders.splice(
              this.data.folders.findIndex((item) => item.id === newVal.id),
              1
            );
          }
        } else if (this.listOperate == "move-folder") {
          if (newVal.moveFolderId == this.selectedFolderId) {
            if (
              !this.data.folders.filter((item) => item.id == newVal.folderId)
            ) {
              if (!this.data.folders) {
                this.data.folders = [newVal.folderData];
              } else {
                this.data.folders.unshift(newVal, folderData);
              }
            }
          } else if (
            newVal.parentId == this.selectedFolderId &&
            newVal.moveFolderId != newVal.parentId
          ) {
            if (
              this.data.folders.filter((item) => item.id == newVal.folderId)
            ) {
              this.data.folders.splice(
                this.data.folders.findIndex(
                  (item) => item.id === newVal.folderId
                ),
                1
              );
            }
          }

          this.$forceUpdate();
        }
      },
      deep: true,
    },
  },
  mounted() {
    window.addEventListener(
      "scroll",
      () => {
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        var scrollTop = document.querySelector(".right").scrollTop;
        //变量windowHeight是可视区的高度
        var windowHeight =
          document.documentElement.clientHeight || document.body.clientHeight;
        //变量scrollHeight是滚动条的总高度
        var scrollHeight = document.querySelector(".right").scrollHeight;
        this.$store.commit("setListReachBottom", false);

        //滚动条到底部的条件(距底部20px时触发加载)
        if (scrollTop + windowHeight >= scrollHeight - 20) {
          this.$store.commit("setListReachBottom", true);
        }
      },
      true
    );
  },
  inheritAttrs: false, // 取消props自应用html属性的功能
  components: {
    project,
    folder,
  },
  methods: {
    handleEditFolder() {},
    handleDeleteFolder(index) {
      this.data.folders.splice(index, 1);
      this.$forceUpdate();
    },
    handleDeleteProject(index) {
      this.data.projects.splice(index, 1);
      this.$forceUpdate();
    },
    handleCopyProject(data) {
      this.data.projects.unshift(data);
      this.$forceUpdate();
    },
    handlePermanentlyDeleteFolder(index) {
      this.data.folders.splice(index, 1);
      this.$forceUpdate();
    },
    handleRestoreFolder(index) {
      this.data.folders.splice(index, 1);
      this.$forceUpdate();
    },
    handlePermanentlyDeleteProject(index) {
      this.data.projects.splice(index, 1);
      this.$forceUpdate();
    },
    handleRestoreProject(index) {
      this.data.projects.splice(index, 1);
      this.$forceUpdate();
    },
    closeNewMenu() {
      this.newMenuShow = false;
    },
    newProject() {
      this.$emit("new-project");
    },
    newFolder() {
      debugger;
      this.$emit("new-folder");
    },
    getData() {
      // todo 列表接口
    },
  },
};
</script>

<style lang="less" scoped>
.list-box {
  position: relative;
  flex: 1;
}
.right-project-list {
  display: flex;
  flex-wrap: wrap;
}

.right-project-create {
  width: 263px;
  height: 129px;
  border-radius: 11px;
  border: 1px dashed #999;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.right-project-create-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 40%;
}

.right-project-create-center.last {
}

.right-project-create-main {
  display: flex;
  align-items: center;
  color: #333;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  cursor: pointer;
}

.right-project-create-img {
  width: 18px;
  margin-right: 9px;
}

.right-project-create-modal {
  position: absolute;
  top: 33px;
  left: -9px;
  font-size: 14px;
  background: #ffffff;
  box-shadow: 0px 2px 3px 0px rgba(102, 102, 102, 0.2);
  border-radius: 3px;
  padding: 14px 15px;
  width: 124px;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(-15px);
  transition: all 0.1s;
  z-index: -1;
}

.right-project-create-modal-actived {
  opacity: 1;
  transform: translateY(0);
  transition-duration: 0.25s;
  z-index: 10;
}

.right-project-create-modal-item {
  display: flex;
  align-items: center;
  color: #666;
  font-weight: 400;
  margin-bottom: 12px;
  cursor: pointer;
  &:last-child {
    margin-bottom: 0;
  }
}

.right-project-create-modal-item-img {
  width: 15px;
  margin-right: 9px;
}
</style>
